<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/main">进入主页</router-link>
    <router-view></router-view>
</div>
<template id="login">
    <div>
        <h3>登录</h3>
    </div>
</template>
<template id="register">
    <div>
        <h3>注册</h3>
    </div>
</template>
<template id="main">
    <div>
        <h3>欢迎您 main</h3>
        <router-link to="/main/login" tag="button">登录</router-link>
        <router-link to="/main/register" tag="button">注册</router-link>

<!--        用来展示 登录 或者是 注册的子组件-->
        <router-view></router-view>
    </div>
</template>
<script>
    const login = {
        template: '#login'
    }
    const register = {
        template: '#register'
    }
    const main = {
        template: '#main'
    }

    new Vue({
        el: '#app',
        router: new VueRouter({
            routes:[

                {
                    path: '/main',
                    component: main,
                    children: [
                        {
                            path: 'login',
                            component: login
                        },
                        {
                            path: 'register',
                            component: register
                        }
                    ]
                }
            ]
        })
    })
</script>
</body>
</html>
